<template>
	<view>
		<view class="padding-lr" style="background: #292A45;">
			<view class="block-title active">
				<view class="title">
					<text class="text-white">项目推荐</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="padding-lr-lg" v-for="i in product" :key="i.id">
				<view class="item" @click="$u.route('/pages/pledge/buy?id='+i.id)">
					<view class="title">
						<text>{{i.product_name}}</text>
					</view>
					<view class="flex justify-between padding-tb">
						<view class="info">
							<view class="num">{{i.cft_rate}} <text class="sm">%</text></view>
							<view>日收益率</view>
						</view>
						<view class="info">
							<view class="num">{{i.duration}} <text class="sm">天</text></view>
							<view>体验期限</view>
						</view>
						<view class="info">
							<view class="num">{{i.amount}} <text class="sm">usdt</text></view>
							<view>质押金额</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-bar tabbar shopnav margin-bottom-xl">
			<view class="action active">
				<image src="../../static/tabbar/zhiya-active.png" class="icon"></image>
				<view>首页</view>
			</view>
			<view class="action text-gray" @click="$u.route({ type: 'redirect', url: 'pages/pledge/profit-list' })">
				<image src="../../static/tabbar/more.png" class="icon"></image>
				<view>持有</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				product: []
			};
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				this.$u.get('/cft/product').then(res => {
					this.product = res.data.result.product
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100rpx;
	}
	.item {
		padding: 30rpx 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		color: #888888;

		.title {
			color: #fff;
			font-size: 30rpx;
			letter-spacing: 2rpx;
			font-weight: bold;
		}

		.info {
			width: 33.33%;
			font-size: 24rpx;
			font-weight: bold;
			letter-spacing: 2rpx;

			&:nth-of-type(2) {
				text-align: center;
			}

			&:nth-of-type(3) {
				text-align: right;
			}

			.num {
				color: #00D28B;
				font-size: 40rpx;
				margin: 16rpx 0;
			}

			.sm {
				font-size: 24rpx;
			}
		}
	}

	.tabbar {
		background-color: #434657;
		position: fixed;
		width: 100%;
		z-index: 999;
		bottom: 0;
		margin: 0;
		.icon {
			margin: 8rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
